<template>
    <div class="swiperSettingWrap" >
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="轮播图设置" name="first">
                <div class="zsHtml">
                    <div class="zsContent1">
                        <h3>轮播图标题</h3>
                        <input type="text" placeholder="新闻标题" v-model="swiperTitle">
                        <div class="zsFlex">
                            <div class="zsFlexLeft">
                                <p class="zsFlexLeftP">轮播图介绍</p>
                                <input type="text" placeholder="请输入内容" v-model="swiperName">
                            </div>
                            <div class="zsFlexRight">
                                <p>轮播图上传</p>
                                <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                    <div class="zsContent2">
                        <p class="Zt">状态</p>
                        <div class="radioBox">
                            <el-radio v-model="radio" label="0">启用</el-radio>
                            <el-radio v-model="radio" label="1">禁用</el-radio>
                        </div>
                        <div class="radioBox">
                            <p>开始时间</p>
                            ----
                            <p>结束时间</p>
                        </div>
                    </div>
                    <div class="zsContent2">
                        <p class="Zt">排序</p>
                        <el-dropdown trigger="click">
                            <el-button type="primary">请选择序号</el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>1</el-dropdown-item>
                                <el-dropdown-item>2</el-dropdown-item>
                                <el-dropdown-item>3</el-dropdown-item>
                                <el-dropdown-item>4</el-dropdown-item>
                                <el-dropdown-item>5</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <p class="Zt">类型</p>
                        <el-dropdown trigger="click">
                            <el-button type="primary">请选择类型</el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>后台首页</el-dropdown-item>
                                <el-dropdown-item>配置管理</el-dropdown-item>
                                <el-dropdown-item>新增历程</el-dropdown-item>
                                <el-dropdown-item>新增伙伴</el-dropdown-item>
                                <el-dropdown-item>关于我们</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div class="setting_btnBox">
                    <button class="previewBtn settingBtn">预览</button>
                    <button class="submitBtn settingBtn" v-on:click="addSubMitFn">提交</button>
                </div>
            </el-tab-pane>
            <!-- 轮播图展示 -->
            <el-tab-pane label="轮播图展示" name="second">
                <h1>轮播图</h1>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        prop="id"
                        label="序号"
                        width="90">
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="轮播图标题"
                        width="140">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="类型"
                        width="130">
                    </el-table-column>
                    <el-table-column
                        prop="pictureId"
                        label="图片"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="开始时间"
                        width="190">
                    </el-table-column>
                    <el-table-column
                        prop="updateTime"
                        label="结束时间"
                        width="190">
                    </el-table-column>
                    <el-table-column
                        prop="sort"
                        label="排序"
                        width="100">
                        <template>是</template>
                    </el-table-column>
                    <el-table-column
                        prop="createBy"
                        label="轮播图介绍"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="founder"
                        label="创建人"
                        width="90">
                        <template>创建人</template>
                    </el-table-column>
                    <el-table-column
                        prop="regenerator"
                        label="更新人"
                        width="90">
                        <template>更新人</template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 编辑弹窗 -->
                <el-dialog title="修改数据" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="轮播图标题" :label-width="formLabelWidth">
                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="状态" :label-width="formLabelWidth">
                                    <el-input v-model="form.status" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="轮播图内容" :label-width="formLabelWidth">
                                    <el-input v-model="form.createBy" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="QuXiao()">取 消</el-button>
                                <el-button type="primary" @click="QueDing()">确 定</el-button>
                            </div>
                </el-dialog>

                <div class="bom">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                     @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    :total="60">
                    </el-pagination>
                </div>
                

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
 import {page, addSlideShow, updateSlideShow, deleteSlideShow} from '../../request/api/all'
    export default {
        data() {
            return {
                    activeName: 'second',
                    tableData: [],
                    radio: '0',
                    fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
                    imageUrl:"",
                    handleAvatarSuccess:"",
                    beforeAvatarUpload:"",
                    page:1,
                    swiperTitle:"", //
                    swiperName:"", //轮播图介绍
                    dialogFormVisible: false,
                    form: {
                        name: '',
                        status:"",
                        createBy:""
                    },
                    formLabelWidth: '120px',
                    ids:0
                };
            },
            methods: {
                // 被选中时触发
                handleClick(tab, event) {
                   console.log(tab, event);
                },

                // 点击上传
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${ file.name }? `);
                },
                // 分页
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.page=val
                    this.pageFn()
                },

                //获取分页数据
                async pageFn(){
                    let res = await page({
                        "pageNum":this.page,
                        "pageSize":5
                    })
                    console.log("轮播图分页",res.data.rows)
                    this.tableData = res.data.rows
                },

                // 点击提交
                async addSubMitFn(){
                    let res = await addSlideShow({
                        "id": 0,
                        "orderId": 0,
                        "pictureId": 0,
                        "status": this.radio,
                        "title": this.swiperTitle,
                        "type": 0,
                    })
                    console.log("轮播图上传:",res)
                    this.pageFn()
                },
                // 编辑
                handleEdit(val,row){
                    this.dialogFormVisible = true
                    this.ids = row.id
                },
                async QueDing(){
                    this.dialogFormVisible = false
                    let res = await updateSlideShow({
                        "createBy": this.form.createBy,
                        "createTime": "",
                        "id": this.ids,
                        "isDelete": 0,
                        "orderId": 0,
                        "pictureId": 0,
                        "status": this.form.status,
                        "title": this.form.name,
                        "type": 0,
                        "updateBy": "",
                        "updateTime": ""
                    })
                    console.log("编辑轮播图:",res)
                    this.pageFn()
                },
                QuXiao(){
                    this.dialogFormVisible = false
                },
                // 删除
                async handleDelete(val,txtx){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteSlideShow(txtx.id)
                        this.pageFn()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
                },
            },
             created(){
                this.pageFn()
             }
        };
</script>

<style lang="scss">
.swiperSettingWrap{
    width: 100%;
    /* background: #ccc; */
}
// 轮播图设置样式
.zsHtml{
    width: 100%;
    background: #fff;
    padding: 30px;
    box-sizing: border-box;
    display: flex;

    .zsContent1{
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        h3{
            font-size: 18px;
            color: #223354;
        }

        input{
            width: 400px;
            height: 60px;
            border-radius: 5px;
            opacity: 1;
            background: #F6F8FB;
            box-sizing: border-box;
            border: 1px solid #E0E8F4;
            outline: none;
            padding-left: 20px;
        }

        .zsFlex{
            width: 400px;
            display: flex;
            justify-content: space-between;
            margin-top: 40px;

            .zsFlexLeft{
                p{
                    font-family: Roboto;
                    font-size: 13px;
                    font-weight: bold;
                    line-height: 18px;
                    display: flex;
                    align-items: center;
                    letter-spacing: 0px;
                    /* Color States/Common/Black */
                    color: #223354;
                }

                input{
                    width: 230px;
                    border-radius: 5px;
                    opacity: 1;
                    background: #F6F8FB;
                    outline: none;
                }
            }
            
        }
    }

    .zsContent2{
        margin-left: 120px;
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .upload-demo{
            margin-bottom: 80px;
        }


        .Zt{
            font-family: Roboto;
            font-size: 14px;
            font-weight: bold;
            line-height: 18px;
            text-align: right;
            display: flex;
            align-items: center;
            letter-spacing: 0px;
            /* Color States/Common/Black */
            color: #223354;
        }

        .radioBox{
            width: 130px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            margin-top: 10px;


            p{
                font-family: Roboto;
                font-size: 13px;
                font-weight: bold;
                line-height: 18px;
                display: flex;
                align-items: center;
                letter-spacing: 0px;
                /* Color States/Common/Black */
                color: #223354;
            }
        }
    }
}
.bom{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: 192px;
}

// 轮播图展示样式


// 预览 提交样式(公共)
.setting_btnBox{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        margin-top: 40px;

        .settingBtn{
            width: 120px;
            height: 40px;
            border-radius: 5px;
            opacity: 1;
            border: none;
            cursor: pointer;
        }

        .previewBtn{
            background: #EFF1F8;
            margin-right: 50px;
        }

        .submitBtn{
            background: #2567FF;
            color: #fff;
        }
}


// elementUI上传样式(公共)
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
   border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    text-align: center;
}
.avatar {
    width: 108px;
    height: 108px;
    display: block;
}

</style>